<template>
  <div class="profile-page">
    <div class="profile-title">个人管理</div>
    <div class="profile-card">
      <div class="profile-right" style="margin: 0 auto; width: 100%;">
        <form class="profile-form" @submit.prevent>
          <div class="form-row">
            <div class="form-group">
              <label>工号</label>
              <input v-model="form.id" type="text" />
            </div>
            <div class="form-group">
              <label>姓名</label>
              <input v-model="form.name" type="text" />
            </div>
          </div>
          <div class="form-row">
            <div class="form-group">
              <label>职称</label>
              <input v-model="form.title" type="text" />
            </div>
            <div class="form-group">
              <label>所属院系/教研室</label>
              <input v-model="form.department" type="text" />
            </div>
          </div>
          <div class="form-row">
            <div class="form-group">
              <label>研究方向</label>
              <input v-model="form.research" type="text" />
            </div>
            <div class="form-group">
              <label>可带学生人数上限</label>
              <input v-model="form.maxStudents" type="number" min="0" />
            </div>
          </div>
          <div class="form-row">
            <div class="form-group">
              <label>联系方式</label>
              <input v-model="form.contact" type="text" />
            </div>
            <div class="form-group"></div>
          </div>
          <div class="form-actions">
            <button type="submit" class="save-btn">保存修改</button>
            <button type="button" class="reset-btn" @click="handleReset">重置</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'Profile',
  data() {
    return {
      form: {
        id: '',
        name: '',
        title: '',
        department: '',
        research: '',
        maxStudents: '',
        contact: ''
      },
      initialForm: {
        id: '',
        name: '',
        title: '',
        department: '',
        research: '',
        maxStudents: '',
        contact: ''
      }
    }
  },
  computed: {
    ...mapState({
      user: state => state.user
    })
  },
  created() {
    // 从 Vuex store 获取用户信息
    if (this.user) {
      this.form = {
        id: this.user.id || '',
        name: this.user.name || '',
        title: this.user.title || '',
        department: this.user.department || '',
        research: this.user.research || '',
        maxStudents: this.user.maxStudents || '',
        contact: this.user.contact || ''
      }
      this.initialForm = { ...this.form }
    }
  },
  methods: {
    handleReset() {
      this.form = { ...this.initialForm }
    },
    async handleSubmit() {
      try {
        // 这里添加更新用户信息的 API 调用
        // await this.$store.dispatch('updateUserProfile', this.form)
        this.$message.success('个人信息更新成功')
      } catch (error) {
        this.$message.error('更新失败：' + error.message)
      }
    }
  }
}
</script>

<style scoped>
.profile-page {
  max-width: 1400px;
  margin: 60px auto;
}
.profile-title {
  font-size: 32px;
  font-weight: bold;
  color: #34495e;
  text-align: center;
  margin-bottom: 48px;
}
.profile-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.10);
  padding: 56px 56px 40px 56px;
  display: flex;
  align-items: flex-start;
  gap: 60px;
}
.profile-right {
  flex: 1;
}
.profile-form {
  width: 100%;
}
.form-row {
  display: flex;
  gap: 48px;
  margin-bottom: 38px;
}
.form-group {
  flex: 1;
  display: flex;
  align-items: center;
}
.form-group label {
  width: 140px;
  min-width: 140px;
  color: #222;
  font-size: 20px;
  font-weight: 500;
  margin-right: 12px;
  text-align: left;
}
.form-group input[type="text"],
.form-group input[type="number"] {
  flex: 1;
  padding: 12px 16px;
  border: 1.5px solid #ccc;
  border-radius: 6px;
  font-size: 18px;
  box-sizing: border-box;
  text-align: left;
  height: 40px;
}
.form-actions {
  margin-top: 38px;
  display: flex;
  gap: 32px;
  justify-content: center;
}
.save-btn {
  background: #409eff;
  color: #fff;
  border: none;
  padding: 10px 32px;
  border-radius: 8px;
  font-size: 20px;
  cursor: pointer;
}
.reset-btn {
  background: #f4f4f4;
  color: #333;
  border: none;
  padding: 10px 24px;
  border-radius: 8px;
  font-size: 20px;
  cursor: pointer;
}
</style>